<template>
<!--  <div class="app-container">-->
<!--    <el-aside-->
<!--      class="my-side"-->
<!--      style="margin: 10px; width: 290px; position: fixed"-->
<!--    >-->
<!--      <div style="border-bottom: 2px solid #ccc">-->
<!--        <p>试卷名称：{{ title }}</p>-->
<!--        <p>提交人：{{ student }}</p>-->
<!--        <p>耗时：{{ time }}</p>-->
<!--        <p>得分：{{ perScore }}/{{ totalNum }}</p>-->
<!--      </div>-->
<!--      <el-row-->
<!--        style="-->
<!--          margin-top: 10px;-->
<!--          border-bottom: 2px solid #ccc;-->
<!--          padding-bottom: 10px;-->
<!--        "-->
<!--      >-->
<!--        <span :key="item.itemOrder" v-for="item in paperList">-->
<!--          <el-tag-->
<!--            :type="answerCorrect(item.true)"-->
<!--            class="do-exam-title-tag"-->
<!--            @click="goAnchor('#question-' + item.itemOrder)"-->
<!--            >{{ item.itemOrder }}</el-tag-->
<!--          >-->
<!--        </span>-->
<!--      </el-row>-->
<!--      <div class="my-button" align="center" style="margin-top: 10px">-->
<!--        <el-button @click="submitForm"> 提交批改 </el-button>-->
<!--      </div>-->
<!--    </el-aside>-->
<!--    <el-main class="my-main">-->
<!--      <el-form>-->
<!--        <div>-->
<!--          <div-->
<!--            class="content"-->
<!--            v-for="item in paperList"-->
<!--            :key="item.id"-->
<!--            :id="'question-' + item.itemOrder"-->
<!--          >-->
<!--            <div class="my-title">{{ item.itemOrder }}、{{ item.title }}</div>-->
<!--            <div class="my-select">-->
<!--              &lt;!&ndash; 单选题 &ndash;&gt;-->
<!--              <el-radio-group-->
<!--                v-model="item.selectOption"-->
<!--                v-if="item.type === 1"-->
<!--              >-->
<!--                <el-radio label="A">A</el-radio>-->
<!--                <el-radio label="B">B</el-radio>-->
<!--                <el-radio label="C">C</el-radio>-->
<!--                <el-radio label="D">D</el-radio>-->
<!--              </el-radio-group>-->
<!--              &lt;!&ndash; 判断题 &ndash;&gt;-->
<!--              <el-radio-group-->
<!--                v-model="item.selectOption"-->
<!--                v-if="item.type === 3"-->
<!--              >-->
<!--                <el-radio label="是">是</el-radio>-->
<!--                <el-radio label="否">否</el-radio>-->
<!--              </el-radio-group>-->
<!--              &lt;!&ndash; 多选题 &ndash;&gt;-->
<!--              <el-checkbox-group-->
<!--                v-model="item.selectOption"-->
<!--                v-if="item.type === 2"-->
<!--              >-->
<!--                <el-checkbox label="A"></el-checkbox>-->
<!--                <el-checkbox label="B"></el-checkbox>-->
<!--                <el-checkbox label="C"></el-checkbox>-->
<!--                <el-checkbox label="D"></el-checkbox>-->
<!--                <el-checkbox label="E"></el-checkbox>-->
<!--              </el-checkbox-group>-->
<!--              <p v-if="item.type === 4 || item.type === 5">-->
<!--                {{ item.selectOption }}-->
<!--              </p>-->
<!--            </div>-->
<!--            <div class="exam-result">-->
<!--              <p>-->
<!--                结果：-->
<!--                <el-tag size="small" type="danger" v-if="item.true === 0"-->
<!--                  >错误</el-tag-->
<!--                >-->
<!--                <el-tag size="small" type="success" v-else-if="item.true === 1"-->
<!--                  >正确</el-tag-->
<!--                >-->
<!--                <el-tag size="small" type="warning" v-else>待批改</el-tag>-->
<!--              </p>-->
<!--              <p>-->
<!--                <span class="question-show-item">难度：</span>-->
<!--                <el-rate-->
<!--                  v-model="item.difficult"-->
<!--                  class="question-item-rate"-->
<!--                  style="display: inline"-->
<!--                  disabled-->
<!--                ></el-rate>-->
<!--              </p>-->
<!--              <p>解析：{{ item.explain }}</p>-->
<!--              <p>正确答案：{{ item.answer }}</p>-->
<!--              <p>分数：{{ item.totalScore }}</p>-->
<!--              <p>-->
<!--                得分：-->
<!--                <span v-if="item.type < 4">{{ item.myScore }}</span>-->
<!--                <el-input-number-->
<!--                  v-else-->
<!--                  v-model="item.myScore"-->
<!--                  :min="0.0"-->
<!--                  :max="item.totalScore"-->
<!--                  :precision="1"-->
<!--                ></el-input-number>-->
<!--              </p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-form>-->
<!--    </el-main>-->
<!--  </div>-->

  <div>
    <el-row  class="do-exam-title" style="background-color: #F5F5DC">
      <el-col :span="24">
        <span :key="item.itemOrder"  v-for="item in answer.answerItems">
             <el-tag :type="questionDoRightTag(item.doRight)" class="do-exam-title-tag" @click="goAnchor('#question-'+item.itemOrder)">{{item.itemOrder}}</el-tag>
        </span>
      </el-col>
    </el-row>
    <el-row  class="do-exam-title-hidden">
      <el-col :span="24">
        <span :key="item.itemOrder"  v-for="item in answer.answerItems">
             <el-tag  class="do-exam-title-tag" >{{item.itemOrder}}</el-tag>
        </span>
      </el-col>
    </el-row>
    <el-container  class="app-item-contain">
      <el-header class="align-center">
        <h1>{{form.name}}</h1>
        <div>
          <span class="question-title-padding">试卷得分：{{answer.score}}</span>
          <span class="question-title-padding">试卷耗时：{{formatSeconds(answer.doTime)}}</span>
        </div>
      </el-header>
      <el-main>
        <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
          <el-row :key="index"  v-for="(titleItem,index) in form.titleItems">
            <h3>{{titleItem.name}}</h3>
            <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
              <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder+'.'"
                            v-for="questionItem in titleItem.questionItems"
                            class="exam-question-item"  label-width="50px" :id="'question-'+ questionItem.itemOrder">
                <el-row>
                  <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem"  :answer="answer.answerItems[questionItem.itemOrder-1]"/>
                </el-row>
                <el-row v-if="answer.answerItems[questionItem.itemOrder-1].doRight === null">
                  <label style="color: #e6a23c">批改：</label>
                  <el-radio-group v-model="answer.answerItems[questionItem.itemOrder-1].score">
                    <el-radio  v-for="item in scoreSelect(questionItem.score)"  :key="item"  :label="item" >
                      {{item}}
                    </el-radio>
                  </el-radio-group>
                </el-row>
              </el-form-item>
            </el-card>
          </el-row>
          <el-row class="do-align-center">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="()=>{this.$router.push('/answer/list/')}">取消</el-button>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import examPaperAnswerApi from '@/api/examPaperAnwser'
import { mapState, mapGetters } from 'vuex'
import QuestionAnswerShow from '@/views/answer/components/QuestionAnswerShow.vue'
export default {
  components: { QuestionAnswerShow },
  data () {
    return {
      title: '',
      student: '',
      time: '',
      perScore: '',
      totalNum: '',
      difficult: 3,
      paperList: [],
      score: 0.0,
      formData: {},

      //题目相关
      formLoading: false,
      form: {},
      answer: {
        id: null,
        score: 0,
        answerItems: [],
        doRight: false
      }
    }
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      //这个是Mock
      // examPaperAnswerApi.answerList(this.queryParam).then((data) => {
      //   console.log('批改页面：',data)
      //   const re = data.response
      //   this.paperList = re.list
      //   this.title = re.title
      //   this.student = re.student
      //   this.time = re.time
      //   this.perScore = re.perScore
      //   this.totalNum = re.totalNum
      // })
      // 实际接口
      console.log('路由传递的批改ID',this.$route.query.id)
      let paperId = this.$route.query.id
      let _this = this
      _this.formLoading = true

      this.$axios.post(`/api/student/exampaper/answer/read/${paperId}`).then(res => {
        let re = res.data
        console.log('批改响应【/api/student/exampaper/answer/read】：',re.response)
        _this.form = re.response.paper
        _this.answer = re.response.answer
        _this.formLoading = false
      })
    },
    submitForm () {
      // this.$message({
      //   message: '已完成批改',
      //   type: 'success'
      // })
      // this.$router.push('/answer/list/')
      let _this = this
      _this.formLoading = true
      examPaperAnswerApi.edit(this.answer).then(re => {
        if (re.code === 1) {
          _this.$alert('试卷得分：' + re.response + '分', '考试结果', {
            confirmButtonText: '返回考试记录',
            callback: action => {
              _this.$router.push('/answer/list/')
            }
          })
        } else {
          _this.$message.error(re.message)
        }
        _this.formLoading = false
      }).catch(e => {
        _this.formLoading = false
      })
    },
    answerCorrect (correct) {
      if (correct === 1) return 'success'
      else if (correct === 0) return 'danger'
      else return 'warning'
    },
    goAnchor (selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: 'instant',
        block: 'center',
        inline: 'nearest'
      })
    },
    questionDoRightTag (status) {
      return this.enumFormat(this.doRightTag, status)
    },
    formatSeconds (theTime) {
      let theTime1 = 0
      let theTime2 = 0
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60)
        theTime = parseInt(theTime % 60)
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60)
          theTime1 = parseInt(theTime1 % 60)
        }
      }
      let result = '' + parseInt(theTime) + '秒'
      if (theTime1 > 0) {
        result = '' + parseInt(theTime1) + '分' + result
      }
      if (theTime2 > 0) {
        result = '' + parseInt(theTime2) + '小时' + result
      }
      return result
    },
    scoreSelect (score) {
      let array = []
      for (let i = 0; i <= parseInt(score); i++) {
        array.push(i.toString())
      }
      if (score.indexOf('.') !== -1) {
        array.push(score)
      }
      return array
    },
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      doRightTag: state => state.exam.question.answer.doRightTag
    })
  }
}
</script>

<style lang="scss" scoped>
.align-center {
  text-align: center
}

.exam-question-item{
  padding: 10px;
  .el-form-item__label{
    font-size: 15px !important;
  }
}

.question-title-padding{
  padding-left: 25px;
  padding-right: 25px;
}
</style>
